<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>恒铸智能柜管理平台</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/MUI/css/mui.picker.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css"media="all" />
<script src="${pageContext.request.contextPath}/resources/MUI/js/mui.picker.min.js"></script>
</head>
<style>
.btn {
	margin: 5px 0px 0px 0.5%;
	width: 40%;
	padding: 5px;
	float: left;
}

.mui-ellipsis {
	width: 65%;
}
a{
    color: #007aff;
    font-size:17px;
 }
h4{
	display: inline-block;
	color:#616161;
	font-size:17px;
	font-weight: 600;
    line-height: 2;
}
.caseBoxRecord{
	padding:0px 10px 10px 10px;
	color:#3e3e3e;
	font-size: 14px
}
.caseBoxRecord ul{
	box-shadow: 1px 2px 5px #bdbdbd;
	border-radius: 2%;
	padding:12px;
	background: white;
    border-left: #00a700 solid 3px;
}
</style>

<body>
	<form class="mui-input-group mui-collapse-content">
		<div class="mui-input-row">
			<label>门号:</label> <input type="hidden" class="caseNo" name="caseNo"
				placeholder="普通输入框"> <input type="hidden" class="boxId"
				name="boxId" placeholder="普通输入框"> <input type="text"
				class="doorNum" disabled="disabled" name="doorNum"
				placeholder="普通输入框">
		</div>
	</form>
	<input id='begin' data-options='{}' class="btn mui-btn"
		placeholder="开始时间">
	<input id='end' data-options='{}' class="btn mui-btn"
		placeholder="截止时间">
	<div class="mui-btn mui-btn-primary submit" style="margin: 3px 0px 20px 2%">提交</div>

	<!-- <div id="leg_table"></div> -->
	
	<!--下拉刷新容器-->
    <div id="pullrefresh" ></div>
	
	<script type="text/javascript">
        	mui('#offCanvasContentScroll').scroll().scrollTo(0,0);
        
        	$(".mui-title").html("使用记录");
        	
        	var page = 1;
        	//var pageData=[];
			var selectFlag = false;
			var door = sessionStorage.getItem("door");
			door = JSON.parse(door);
			$(".caseNo").val(door.caseNo)
	  		$(".boxId").val(door.boxId)
	  		$(".doorNum").val(door.doorNum)

			//接收数据
			/* var stateList = $.legTable({
				limit: 10,			//默认10
				page:1,				//默认1
				id:"#leg_table",	//绑定id
				url:"/main/getBoxUseRecord",
				where:{
					boxId:door.boxId
				},
				cols:[
					{field: 'source', title:'平台',templet: function(item){
		        		if(item.source =="2"||item.source=="3"){
		        			return '<span style="color:green;">微信</span>' 
		        		}else if(item.source =="4"||item.source=="5"){
		        			return  '<span style="color:#39a2ec;">支付宝</span>' 
		        		}else{
		        			return "恒铸管理系统";
		        		}
		        	}},
					{field: 'type', title: '操作'},
		            {field: 'usePerson', title: '存物ID/管理员'},
		            {field: 'isManager', title: '管理员操作',templet:function(f){

		            	if(f.isManager == "是"){
		            		return "<span style='color:red;'>是</span>";
		            	}else{
		            		return "<span>否</span>";
		            	}
		            } },
		            {field: 'useTime', title: '时间'}
		        ]
			}); */
				    	
			//时间
			var btns = $('.btn');
			var begin = "",end = "";
			btns.each(function(i, btn) {
				btn.addEventListener('tap', function() {
					var _self = this;
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						_self.picker = new mui.DtPicker(options);
						_self.picker.show(function(rs) {
							if(id == "begin"){
								begin = rs.text;
							}else if(id == "end"){
								end = rs.text;
							}
							$("#"+id).val(rs.text);
							_self.picker.dispose();
							_self.picker = null;
						});
					
				}, false);
			});
			
			/*  $(".submit").on("touchstart",function(){
				param = "&startTime="+begin+"&endTime="+end;
				stateList = $.legTable({
			        	where:{
			        		boxId:door.boxId,
			        		startTime:begin,
			        		endTime:end
		        		}
	        	});
			})  */
			
			$(document).on("touchstart", ".submit",function(){
				selectFlag = true;
				page = 1;
	        	getInfo();
        	})
			//空字符串校验
		    function isNotNull(obj){
			    var result = true;
		    	if(obj instanceof Function || obj instanceof Array){
		    		 return result;
		    	}
			    switch (obj) {
			        case undefined:
			        case null:
			            result = false;
			            break;
			    }
			    if(result){
				    if(obj.replace(/\s+/g,"") == ""){//空字符串校验
				            result = false;
			    	}
			    }
			    return result;
			}
			
			var config = {
			data:[],
			cols:[{field: 'useTime', title: ''},
				{field: 'type', title:'',templet: function(item){
				//type 类型（1.存  2.取  3.清除 4.开门 5。一键开门 6.还 7.借）				
        		if(item.source =="2"||item.source=="3"){
        			return '<span style="color:green;">微信'+item.type+'</span>' 
        		}else if(item.source =="4"||item.source=="5"){
        			return  '<span style="color:#39a2ec;">支付宝'+item.type+'</span>' 
        		}else{
        			return '管理员'+item.type;
        		}
        	}},
            {field: 'usePerson', title: ['存物ID:','管理员:']},
            ],
    		runner:function(flag){
    			var data = this.data;
    			var cols = this.cols;
    			if(flag){
					$("#pullrefresh").empty();
    			}
	    		$.each(data,function(i,item1){
	    			var dom = '<div id='+((page-1)*10+i)+' class="caseBoxRecord"><ul class="mui-table-view">'+
				    				'<li><h4>useTime</h4></li>'+
				    				'<li><font style="width:35%;display:inline-block;">type</font><font>usePerson</font></li>'+
		    				   '</ul></div>';
					for (var j = 0; j < cols.length; j++) {
						var item2 = cols[j];
						var value;
						if(isNotNull(item2.templet)){
							if(item2.templet instanceof Function){
								value = item2.templet(item1);
							}else{
								value = $("#"+item2.templet.replace("#",""))[0].innerHTML;
							}
						}else{
							value = item1[item2.field];
						}
						if(isNotNull(item2.title)){
							if(item1.isManager == "是"){
								value = item2.title[1]+value;
							}else{
								value = item2.title[0]+value;
							}
						}
						dom = dom.replace(item2.field,value);
					};
	    			$("#pullrefresh").append(dom);
	    			//pageData.push(item1);
				});
    	}};
		
		var listenScreenFlag = true;
		var maxScrollYFlag = true;
		var lastScrollVla;
		var scroll = mui('.mui-inner-wrap .mui-scroll-wrapper').scroll(); 
	    document.querySelector('.mui-inner-wrap .mui-scroll-wrapper' ).addEventListener('scroll', function (e){
	    	 if(scroll.y<-50 && listenScreenFlag){
	    		$(".upTop").show();
	    		listenScreenFlag = false;
	    		
	    	}else if(scroll.y >= -50 && !listenScreenFlag){
	    		$(".upTop").hide();
	    		listenScreenFlag = true;
	    	} 
	    	 
	    	if(scroll.y < scroll.maxScrollY && $(".loading").length==0){
	    		$("#pullrefresh").append('<div class="loading">&nbsp;</div>');
	    	}
	    	if((scroll.y+30) < scroll.maxScrollY && maxScrollYFlag){
	    		maxScrollYFlag = false;
	    		$(".loading").text('正在加载...');
	    		setTimeout(function(){
	    			page++;
	    			getInfo();
	    		},1000)
    		}
    	})
	    
	    function getInfo(){
	    	var url = '/main/getBoxUseRecord?page='+page+'&boxId='+door.boxId;
	    	isNotNull(begin)?url=url+"&startTime="+begin:1+1;
	    	isNotNull(end)?url=url+"&endTime="+end:1+1;
	    	//console.log("begin:"+begin+"  end:"+end+"  boxId:"+door.boxId)
         	$.ajax({ 
	    		url:url, 
	    		type:'get',
	    		dataType:"json",
	    		timeout:10000,
	    		data:{},
	    		success:function(res){
	    			$(".loading").remove();
	    			if(res.data.length==0){
	    				$("#pullrefresh").append('<div class="loading">————我也是有底线的————</div>');
	    			}else{
		    			maxScrollYFlag=true;
	    			}
	    			config.data=res.data;
					config.runner(selectFlag);
					selectFlag = false;
	               },
	               error:function(data){
	     	    		console.log("error")
 	    	}});
        }
        getInfo();
		</script>
</body>
</html>